<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!--react核心库-->
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js" ></script>
<!--支持react操作dom-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<!--引入babel,用于将jsx转化为js-->
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js" ></script>
</head>
<body>

<div id="test"></div>
    <script type="text/babel"> /*这里一定要写babel*/
        //1.创建类式组件
        class Weather extends React.Component{
            //render是React.Component中定义的
            constructor(props){
                //构造器值会调用一次
                super(props);
                //初始化状态
                this.state = {isHot:false,wind:'小雨'}
                //通过bind改变了函数中的this
                //构造器中的this就是实例对象
                //解决changeWeather中的this指向问题
                this.demo = this.changeWeather.bind(this)
                // console.log(this);
            }

            render(){
                //render会调用1+n次
                //读取状态
                const {isHot,wind} = this.state;
                return <h1 onClick={this.demo}>今天天气很{this.state.isHot ? '炎热': '凉爽'},{wind}</h1>
            }

            changeWeather() {
                //changeWeather放在哪里？ --Wheather的原型对象上，供实例使用
                //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
                //类中的方法默认开启了局部的严格模式，所以changeWeather中的this是undefined
                
                //获取原来isHot的值
                const isHot = this.state.isHot;
                //注意：状态必须通过setState进行更新，不能直接更改state的值,更新仅仅会改变数据改变的部分
                //其余例如wind部分不会改变，并非完全替换
                this.setState({isHot:!isHot})
            }

        }
        //2.渲染择组件到页面
        ReactDOM.render(<Weather/>,document.getElementById('test'))
    </script>

</body>
</html>